<template>
  <n-modal
    v-model:show="visible"
    preset="card"
    title="动态详情"
    size="huge"
    :bordered="false"
    :mask-closable="false"
  >
    <div class="model-container">
      <div class="list">
        <div class="title">发表者</div>
        <div class="content">{{ dynamicData.username }}</div>
      </div>
      <div class="list">
        <div class="title">发表时间</div>
        <div class="content">{{ dbTimeToTime(dynamicData.createdAt) }}</div>
      </div>
      <div class="list">
        <div class="title">内容</div>
        <div class="content">{{ dynamicData.content }}</div>
      </div>
      <div class="list">
        <div class="title">图片</div>
        <div class="content">
          <n-image-group v-if="dynamicData.community_img !== '-'">
            <n-space>
              <n-image
                v-for="img in dynamicData.community_img"
                :key="img"
                :src="img"
                width="100"
              />
            </n-space>
          </n-image-group>
          <span v-else>-</span>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="footer" v-show="dynamicData.status === 0">
        <n-button @click="handleAudit(2)" size="small" type="error">
          驳回
        </n-button>
        <n-button @click="handleAudit(1)" size="small" type="info">
          通过
        </n-button>
      </div>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { AUDIT_STATUS } from '@/constant'
import { dbTimeToTime } from '@/utils'
import { auditDynamic } from '@/api'

const message = useMessage()

const props = defineProps<{
  data: any
}>()

const visible = defineModel()

const emit = defineEmits(['getData'])

const dynamicData = ref({})

watch(
  () => props.data,
  data => {
    dynamicData.value = JSON.parse(JSON.stringify(data))
    for (const key in dynamicData.value) {
      if (
        dynamicData.value[key] === '' ||
        (Array.isArray(dynamicData.value[key]) &&
          dynamicData.value[key].length === 0)
      ) {
        dynamicData.value[key] = '-'
      }
    }
  }
)

const handleAudit = async status => {
  const res = await auditDynamic({
    id: dynamicData.value.id,
    status
  })
  message.success(res)
  visible.value = false
  emit('getData')
}
</script>

<style scoped lang="scss">
.list {
  display: flex;
  padding: 5px 0;

  .title {
    width: 100px;
    font-weight: bold;
  }

  .content {
    flex: 1;
  }
}

.footer {
  text-align: center;
  .n-button {
    margin-left: 20px;
  }
}
</style>
